<template>
  <section>
    <DemoWithSetup :title="title" :age="age" @change="emitChange" />
    <DemoNoSetup :book="book" @change="emitChange" />
  </section>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import DemoWithSetup from './components/DemoWithSetup.vue'
import DemoNoSetup from './components/DemoNoSetup.vue'
import { DemoKey } from './components/const.ts'
const title = ref<string>('Demo Page')
const age = ref<number>(20)
const book = ref<object>({
  title: '三国',
  year: 2001
})
function emitChange (value) {
  console.log('emit: ', value)
}
provide(DemoKey, 'provide support')
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
